<template>
  <div class="successDetailspa">
    <backzj :mssg="aaa" />
    <!-- 成功 -->
    <div class="cggc">
        <img :src="SMDataURL+'/images/amq-xiadan.png'"></img>
        <p class="ywcc">已完成</p>
    </div>
    <!-- 成功 -->
    <!-- 地址 -->
    <div class="box jhgsa">
        <p class="dizhi">地址：</p>
        <div class="klga">
            <p>联系人<span class="asgsa">et</span></p>
            <p>加快速度喝咖啡和来算的很2533464564634</p>
        </div>
    </div>
    <!-- 地址 -->
    <!-- 订单商品 -->
    <div class="box ddsp">
        <p class="spin">订单商品</p>
        <div class="spimg">
            <div class="ssmg">
                <img :src="SMDataURL+'/images/wwhhr.png'"></img>
            </div>
            <div class="spxq">
                <p class="neir">可接受的会离开复合大师尽快发货开始叫了会计师的费卡萨丁发还是</p>
                <div class="shul">
                    <p class="spshu">×1</p>
                    <p class="jiaq">￥99.9</p>
                </div>
            </div>
        </div>
        <div class="heji">
            <p>合计</p>
            <p class="sjii">实付：￥999.99元</p>
        </div>
    </div>
    <!-- 订单商品 -->
    <!-- 订单详情 -->
    <div class="box ddxv">
        <p class="spin">订单详情</p>
        <div class="heji1">
            <p class="aleft">下单方式</p>
            <p class="aright">快递</p>
        </div>
        <div class="heji1">
            <p class="aleft">快递公司</p>
            <p class="aright"></p>
        </div>
         <div class="heji1">
            <p class="aleft">快递单号</p>
            <p class="aright"></p>
        </div>
         <div class="heji1">
            <p class="aleft">支付方式</p>
            <p class="aright">余额支付</p>
        </div>
         <div class="heji1">
            <p class="aleft">商家名称</p>
            <p class="aright"></p>
        </div>
         <div class="heji1">
            <p class="aleft">下单时间</p>
            <p class="aright">2021-10-21 12:00:00</p>
        </div>
         <div class="heji1">
            <p class="aleft">订单号</p>
            <p class="aright">7983759273592<span class="fuzhi">复制</span></p>
        </div>
        <div class="heji1">
            <p class="aleft">备注</p>
            <p class="aright">安抚</p>
        </div>
    </div>
    <!-- 订单详情 -->
    <!-- 底部固定 -->
    <div class="dibuua">
        <div class="dflk" @click="tospxq">再次购买</div>
        <div class="dflk">评价晒单</div>
    </div>
    <!-- 底部固定 -->
  </div>
</template>

<script>
import backzj from "../components/backzj.vue";
export default {
  components: { backzj },
  data() {
    return {
      aaa: "订单详情",
      DataURL: "https://e.amjhome.com/baojiayou/tts_upload",
      SMDataURL: "https://bjy.51yunkeyi.com/baojiayou/tts_upload",
    };
  },
  methods: {
      tospxq(){
          this.$router.push('/spxiangq')
      }
  },
};
</script>

<style scoped>
.successDetailspa {
  width: 100%;
  height: calc(100% - 80px);
  position: fixed;
  top: 40px;
  left: 0;
  overflow-y: auto;
  background: #f6f6f6;
}
/* 成功 */
.cggc {
  width: 94%;
  border-radius: 4px;
  box-sizing: border-box;
  padding: 15px;
  background: white;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cggc img {
  width: 28px;
  height: 30px;
  margin-right: 10px;
}
.ywcc {
  font-size: 18px;
  color: #27b34a;
}
/* 成功 */
/* 地址 */
.box {
  width: 94%;
  background: white;
  border-radius: 4px;
  margin: 12px auto;
  box-sizing: border-box;
  padding: 10px;
}
.jhgsa {
  display: flex;
  align-items: center;
}
.dizhi {
  width: 22%;
}
.klga {
  display: flex;
  flex-direction: column;
}
.asgsa {
  margin-left: 10px;
}
/* 地址 */
/* 订单商品 */
.ddsp {
  display: flex;
  flex-direction: column;
}
.spin {
  border-bottom: solid 1px #f2f2f2;
  padding: 5px 0 10px 0;
  font-size: 15px;
  font-weight: bold;
  color: #333;
}
.spimg {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px 0;
}
.ssmg {
  width: 56px;
  height: 60px;
  margin-right: 15px;
  flex-shrink: 0;
}
.ssmg img {
  max-width: 100%;
  max-height: 100%;
}
.spxq {
  display: flex;
  flex-direction: column;
}
.neir {
    width: 80%;
  font-size: 17px;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.shul{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.spshu{
    font-size: 12px;
    color: #959A9E;
}
.jiaq{
    color: #FF3333;
    font-size: 15px;
}
.heji{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.sjii{
    color: #FF3333;
    font-size: 15px;
}
/* 订单商品 */
/* 订单详情 */
.ddxv{
    display: flex;
    flex-direction: column;
}
.heji1{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10px 0;
}
.aleft{
    font-size: 15px;
    color: #999;
}
.aright{
    font-size: 15px;
    color: #333;
}
.fuzhi{
    padding: 1px 5px;
    border: 1px solid gainsboro;
    border-radius: 4px;
}
/* 订单详情 */
/* 底部固定 */
.dibuua{
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: fixed;
    bottom: 0;
    left: 0;
}
.dflk {
    padding: 2px 10px;
    border: 1px solid gainsboro;
    border-radius: 10px;
    margin: 0 5px;
}
/* 底部固定 */
</style>